<template>
	<scroll-view scroll-y class="bgf5 group c00" :style="{height: 'calc(100vh - 156rpx - ' + statusBar + 'px)'}">
		<view v-for="(item,index) in list" :key="index" class="rel px10 r6 py8 my10 mx16 shadow" :class="index < 0 ? 'bgf2' : 'bgff'">
			<view class="flex flexC fs12 box">
				<view class="px10 aliC borrd">
					<view class="cff0">
						<text class="fs12">￥</text>
						<text class="fs28 bold6">{{item.coupon.amount}}</text>
					</view>
					<view class="fs11">{{item.coupon.name}}</view>
				</view>
				<view class="flex1 pl10">
					<view class="fs13">满{{item.coupon.order_amount}}可用</view>
					<view class="c85 fs10 py5">有效期：{{item.create_time_txt}}至{{item.valid_time_txt}}</view>
					<view class="flex flexC">
						<view @click="openItem2" class="flex1 flexC flex">
							<text class="c85 fs10">使用规则：</text>
							<image class="w10" :class="false ? 'up' : ''" src="/static/img/icon/up.png" mode="aspectFill"></image>
						</view>
						<text class="bgf6c r40 px10 py2"  @click="clickUse(item)">使用</text>
					</view>
				</view>
				<image v-if="index > 2" class="passed" src="/static/img/bg/passed.png" mode="aspectFill"></image>
			</view>
			<view class="mt6 bgff borbb" v-if="check == true">
				<view class="fs12 px10 mb5" v-for="(rule,index) in item.rule_txt" :key="subIndex">
					<text class="c2e">{{rule.id}}.{{rule.value}}</text>
				</view>
				
				<view class="fs12 px10 mb5" @click="openItem(item.rooms)">
					<text class="c57">查看使用门店></text>
				</view>
			</view>
			
			
		</view>
		
		<!-- 团购券使用范围弹框 -->
		<uni-popup type="center" ref="popup">
			<view class="bgff r10 px30 pb20 flex flexC flexJC flexCol">
				<view class="fs16 bold6 py22">优惠券使用范围</view>
				<view class="bor57 aliC" >
					<view class="flex flexC borb57">
						<view class="left py5">适用门店</view>
						<view class="right py5">适用包间</view>
					</view>
					<view class="flex flexC fs12" v-for="item in currentItem">
						<view class="left">【{{item.shop_name}}】</view>
						<view class="right">
							<view   class="py4">{{item.room_name}}</view>
						</view>
					</view>
				</view>
				<button class="bgf6c r40 w-15 fs14 mt20" @click="$refs.popup.close()">好的，知道啦</button>
			</view>
		</uni-popup>
		
		<view class="flex flexC flexJC">
			<button class="bgf6c  r40 w-15 fs14 mt20 area" @click="clickUse(null)">取消使用券</button>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name:"select-coupon",
		props: {
			statusBar: {
				type: Number,
				default: 20
			},
			list:{
				type:Array,
				default:[]
			},
			selectShop: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				isChecked: false,
				page:1,
				currentShopRoom:[]
			};
		},
		methods: {
			
			clickUse(item){
				
				this.$emit("clickUseCoupon",item);
			},
		
			
			openItem(item){
				
				// for(var i=0;i<this.list.length;i++){
				// 	this.list[i].check = false;
				// }
				if(item.check == true){
					item.check = false;
				}else{
					item.check = true;
				}
		
				console.info("==item check=="+item.check);
			},
			look(item){
				let param = {
					id:item.id,
				};
				let that = this;
				this.$api.lookRoom(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.currentShopRoom = res.data;
						that.$refs.popup.open();
						
					} else {
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
				})
				
			},
	
		}
	}
</script>

<style lang="scss" scoped>
.group {
	.rel {position: relative;}
	.bgf2 {
		color: #858585;
		.cff0 {
			color: #858585;
		}
	}
	.borrd {border-right: 4rpx dashed #eee;}
	.passed {
		width: 86rpx;
		height: 86rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	.box {
		.origin {text-decoration-line: line-through;}
	}
	.borbb {
		border-bottom: 4rpx dashed #eee;
	}
	.w10 {
		width: 20rpx;height: 12rpx;
		transform: rotate(90deg);
		transition: .5s;
		&.up {
			transform: rotate(180deg);
		}
	}
	.borb57 {border-bottom: 2rpx solid #576DAB;}
	.left {width: 200rpx;height: 100%;}
	.right {width: 300rpx;border-left: 2rpx solid #576DAB;}
}
</style>